<template>
  <div class="approval-container">
    <el-card>
      <div class="header">
        <h2>审批管理</h2>
        <div class="actions">
          <el-button type="primary" icon="el-icon-refresh" @click="refreshList">刷新</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="mt-20">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待我审批" name="pending">
          <el-table :data="pendingApprovals" style="width: 100%" height="600">
            <el-table-column prop="title" label="审批事项" width="300" />
            <el-table-column prop="applicant" label="申请人" width="150" />
            <el-table-column prop="department" label="部门" width="180" />
            <el-table-column prop="type" label="审批类型" width="150">
              <template #default="scope">
                <el-tag :type="getTypeTag(scope.row.type)">{{ scope.row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间" width="180" />
            <el-table-column prop="deadline" label="截止时间" width="180" />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button size="small" type="primary" @click="handleApprove(scope.row, 'approve')">通过</el-button>
                <el-button size="small" type="danger" @click="handleApprove(scope.row, 'reject')">拒绝</el-button>
                <el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="我已审批" name="completed">
          <el-table :data="completedApprovals" style="width: 100%" height="600">
            <el-table-column prop="title" label="审批事项" width="300" />
            <el-table-column prop="applicant" label="申请人" width="150" />
            <el-table-column prop="department" label="部门" width="180" />
            <el-table-column prop="type" label="审批类型" width="150">
              <template #default="scope">
                <el-tag :type="getTypeTag(scope.row.type)">{{ scope.row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间" width="180" />
            <el-table-column prop="approvalTime" label="审批时间" width="180" />
            <el-table-column label="状态" width="120">
              <template #default="scope">
                <el-tag :type="scope.row.status === '已通过' ? 'success' : 'danger'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template #default="scope">
                <el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="totalItems"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Approval',
  setup() {
    const activeTab = ref('pending')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const totalItems = ref(35)

    const pendingApprovals = ref([
      {
        id: 1,
        title: '张三的离职申请',
        applicant: '张三',
        department: '技术部/前端组',
        type: '离职',
        applyTime: '2023-05-18 10:30',
        deadline: '2023-05-25 18:00'
      },
      {
        id: 2,
        title: '李四的转正申请',
        applicant: '李四',
        department: '市场部',
        type: '转正',
        applyTime: '2023-05-19 14:15',
        deadline: '2023-05-26 18:00'
      },
      {
        id: 3,
        title: '王五的调动申请',
        applicant: '王五',
        department: '人力资源部',
        type: '调动',
        applyTime: '2023-05-20 09:45',
        deadline: '2023-05-27 18:00'
      },
      {
        id: 4,
        title: '赵六的报销申请',
        applicant: '赵六',
        department: '财务部',
        type: '报销',
        applyTime: '2023-05-21 11:20',
        deadline: '2023-05-28 18:00'
      }
    ])

    const completedApprovals = ref([
      {
        id: 101,
        title: '郑七的采购申请',
        applicant: '郑七',
        department: '采购部',
        type: '采购',
        applyTime: '2023-05-10 08:30',
        approvalTime: '2023-05-12 14:00',
        status: '已通过'
      },
      {
        id: 102,
        title: '钱八的请假申请',
        applicant: '钱八',
        department: '技术部/后端组',
        type: '请假',
        applyTime: '2023-05-11 09:15',
        approvalTime: '2023-05-13 10:30',
        status: '已拒绝'
      }
    ])

    const getTypeTag = (type) => {
      const map = {
        '离职': 'danger',
        '转正': 'success',
        '调动': 'warning',
        '报销': '',
        '采购': 'info',
        '请假': 'primary'
      }
      return map[type] || 'info'
    }

    const refreshList = () => {
      ElMessage.success('审批列表已刷新')
    }

    const handleApprove = (item, action) => {
      const actionText = action === 'approve' ? '通过' : '拒绝'
      ElMessage.success(`已${actionText}审批: ${item.title}`)

      // 从待审批列表移除
      const index = pendingApprovals.value.findIndex(a => a.id === item.id)
      if (index !== -1) {
        pendingApprovals.value.splice(index, 1)
      }

      // 添加到已审批列表
      completedApprovals.value.unshift({
        ...item,
        status: action === 'approve' ? '已通过' : '已拒绝',
        approvalTime: new Date().toLocaleString()
      })
    }

    const viewDetail = (item) => {
      ElMessage.info(`查看审批详情: ${item.title}`)
    }

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    return {
      activeTab,
      currentPage,
      pageSize,
      totalItems,
      pendingApprovals,
      completedApprovals,
      getTypeTag,
      refreshList,
      handleApprove,
      viewDetail,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.approval-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-20 {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>